為什麼決定是 Vue.js ?

1. 提高可閱讀性
   • 程式邏輯與視圖邏輯完全分開
2. 可深可淺的漸進式框架
   • 初學可僅以代替原生 javascript 或 jQuery 為目標
   • 進階可分別以 vue-router, vuex, vue-test-utils 處理客戶端路由、狀態管理、組件的單元測試
3. 簡單輕便、可維護性與可測試性高
   • 體積小、反應快
   • 只專注在視圖層(view layer)
   • 官方文件詳盡
   • vue-cli 的單文件組件容易從文件拆開與導入其他文件，組件裡的 html, css, javascript 獨立成一個可複用 的.vue 檔
4. 響應性
   • 數據一旦被更改， html 文件內所有用到的數據會一起做更新

安裝 Vue.js

外部引入

初步學習可以直接外部引入，配合新手指南服用。

<!--開發環境版本，有除錯提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--生產環境版本，體積更小速度更快，產品上線用-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue CLI

高手向，搭建腳手架，用基礎化的構建工具管理大型項目狀態，方便處理單文件組件、插件的銜接。安裝 Vue CLI 需要 Node.js 8.9 以上的版本。這裡先只提供練習用的 cmd 的 npm 的建置懶人包，日後有機會再詳盡解釋。

# 先 CD 移動到根目錄，還不用創建專案資料夾

npm install -g @vue/cli

vue init webpack 項目名稱

# 接下來會詢問專案設定，依據狀況需要填寫資料與回答是否 Y/N

瀏覽器安裝 Vue.js devtools

實用的 chrome 與 firefox 套件，可以方便檢查元件裡面的資料，觀察 vue 實體的信息與狀態，這個筆記以 chrome 為主。

• Vue.js devtools

之後在瀏覽器中開發者工具就能找到 vue 的頁簽

這個筆記將來寫什麼

只取小弟所需 vue 重點式基本觀念與範例整理，以便日後備忘。就如其名，只是個初學筆記。

鐵人賽 30 天規劃

僅供參考，盡力跟日程表所計畫的一樣。

• 上旬 - Vue.js 基本語法
• 中旬 - 組件與 vue-router
• 下旬 - 架構友好商店線上網頁
  
  目標是精靈球營業額突破 3 億（遊戲幣）

當前框架與函式庫版本

2019 年 9 月 12 日的這個時候

• Vue.js 的最新穩定版本是 2.16.10
• jQuery 3.4.1
• Bootstrap 4.3.1 （還有他需要的 popper.js 是 1.14.7）
• Font Awesome 5.10.2

最後

菜鳥上路挑戰寫文，諸多不周還請各方大大包涵指教。